import { memo, useEffect, useState } from 'react';
import { Row, Col, Card, Statistic, Typography, Table, Button, Divider } from 'antd';
import { UserOutlined, ReadOutlined, BarChartOutlined, ReloadOutlined } from '@ant-design/icons';
import useAdminInfoStore from '@/store/useAdminInfo';
import dayjs from 'dayjs';
import { getServerPerformanceDataApi, ServerPerformanceData } from '@/api/adminApi';

const { Title, Paragraph } = Typography;

const columns = [
  {
    title: '课程id',
    dataIndex: 'id',
    key: 'id',
    width: 350,
  },
  {
    title: '课程名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '课程描述',
    dataIndex: 'description',
    key: 'description',
  },
  {
    title: '更新时间',
    dataIndex: 'updated_at',
    key: 'updated_at',
    render: (text: string) => dayjs(text).format('YYYY-MM-DD HH:mm:ss'),
  },
];

const HomeContent = () => {
  const { adminInfo } = useAdminInfoStore();

  const [loading, setLoading] = useState(false);
  const [serverPerformanceData, setServerPerformanceData] = useState<ServerPerformanceData>({
    cpu: [],
    memory: 0,
    userCount: 0,
    courseCount: 0,
    courseLatestUpdate: [],
  });

  // 获取服务器性能数据
  const getServerPerformanceData = async () => {
    const res = await getServerPerformanceDataApi();
    setServerPerformanceData(res.data);
  };

  // 模拟数据刷新
  const refreshData = () => {
    setLoading(true);
    getServerPerformanceData();
    setLoading(false);
  };

  useEffect(() => {
    // 组件加载时获取数据
    // 这里可以添加实际的API调用
    getServerPerformanceData();
  }, []);

  return (
    <div className="p-4">
      {/* 欢迎信息 */}
      <Card
        style={{ marginBottom: '32px' }}
        className="shadow-sm"
      >
        <div className="flex items-center justify-between">
          <div>
            <Title
              level={3}
              className="m-0"
            >
              欢迎回来，{adminInfo?.username || '管理员'}
            </Title>
          </div>
          <Button
            type="primary"
            icon={<ReloadOutlined />}
            onClick={refreshData}
            loading={loading}
            className="bg-purple-600 hover:bg-purple-700"
            style={{ backgroundColor: '#7D33FF' }}
          >
            刷新数据
          </Button>
        </div>
      </Card>

      {/* 数据统计卡片 */}
      <Row
        gutter={[16, 16]}
        className="mb-6"
      >
        <Col
          sm={12}
          xs={24}
        >
          <Card className="h-full shadow-sm hover:shadow-md transition-shadow">
            <Statistic
              title="注册用户"
              value={serverPerformanceData.userCount}
              valueStyle={{ color: '#1890ff' }}
              prefix={<UserOutlined />}
            />
          </Card>
        </Col>
        <Col
          sm={12}
          xs={24}
        >
          <Card className="h-full shadow-sm hover:shadow-md transition-shadow">
            <Statistic
              title="课程数量"
              value={serverPerformanceData.courseCount}
              valueStyle={{ color: '#52c41a' }}
              prefix={<ReadOutlined />}
            />
          </Card>
        </Col>
      </Row>

      {/* 系统公告 */}
      <Card
        style={{ marginBottom: '32px' }}
        title={
          <div className="flex items-center">
            <BarChartOutlined className="mr-2" /> 最近更新课程
          </div>
        }
        className="mb-6 shadow-sm"
      >
        <Table
          dataSource={serverPerformanceData.courseLatestUpdate.map((item) => ({
            ...item,
            key: item.id,
          }))}
          columns={columns}
          pagination={false}
          size="middle"
        />
      </Card>

      {/* 系统信息 */}
      <Card
        title="系统信息"
        className="shadow-sm"
      >
        <Row gutter={[16, 16]}>
          <Col span={8}>
            <Statistic
              title="服务器状态"
              value="正常"
            />
          </Col>
          <Col span={8}>
            <Statistic
              title="CPU数量"
              value={serverPerformanceData?.cpu.length}
            />
          </Col>
          <Col span={8}>
            <Statistic
              title="内存使用率"
              // 计算内存使用率
              value={
                serverPerformanceData?.memory
                  ? `${(serverPerformanceData.memory / 1024 / 1024 / 1024).toFixed(2)} `
                  : '-'
              }
              suffix="%"
            />
          </Col>
        </Row>
        <Divider />
        <Paragraph className="text-gray-500">
          中国传统节日课堂后台管理系统 © 2025 臧瑞雪保留所有权利
        </Paragraph>
      </Card>
    </div>
  );
};

export default memo(HomeContent);
